<script setup lang="ts" name="App">

import { ref,reactive } from 'vue'

let age = ref(0)


let person = ref({name:'jshand',age:18})
let user = reactive({name:'张学友',age:50,

      addres:{
        province:'黑龙江'
      }
})   //reactive 对象定义的数据 不能整体重新赋值，如果赋值就失去响应式了


let userArr = ref([1,2,3]);
// let userArr = reactive([1,2,3]);



//方法
function changeSimpleAge(){
  age.value += 1
}

function changePersonName(){
  console.log(person)
  // person.name += '~'
  person.value.name += '~'
}

function changePersonAge(){
  person.value.age += 1;
}


function changePerson(){
  

  person.value ={name:'刘德华',age:50}
  console.log(
    '%c person: ',
    'background-color: #3756d4; padding: 4px 8px; border-radius: 2px; font-size: 14px; color: #fff; font-weight: 700;',
    person 
  )
}

function changeUser(){
  console.log(
    '%c user之前: ',
    'background-color: #3756d4; padding: 4px 8px; border-radius: 2px; font-size: 14px; color: #fff; font-weight: 700;',
    user 
  )
  // user = {name:'梅艳芳',age:40}

  // user.name  = '梅艳芳'
  // user.age = 40;

  Object.assign(user,{name:'梅艳芳',age:40})
  console.log(
    '%c user之后: ',
    'background-color: #3756d4; padding: 4px 8px; border-radius: 2px; font-size: 14px; color: #fff; font-weight: 700;',
    user 
  )
}


function changeUserProvice(){
  user.addres.province = '辽宁'
}

function query(){
  let newArr = [4,5,6]//默你从数据库查询出来的数据
  userArr.value = newArr
}

</script>

<template>
    <div>
      基础类型age:  {{ age }}
    </div>
    <div>
      <button @click="changeSimpleAge">修改基础数据 age</button>
    </div>


    <div>
      对象类型(ref)  name:{{ person.name }} age:{{ person.age }}
    </div>

    <div>
      对象类型(reactive)  name:{{ user.name }} age:{{ user.age }}  ,省份:{{ user.addres.province }}
    </div>
    <div>
      <button @click="changePersonName">修改人的姓名</button>
      <button @click="changePersonName">修改人的姓名</button>
      <button @click="changePerson">修改的整体(ref)</button>
      <button @click="changeUser">修改的整体(reactive)</button>
      <button @click="changeUserProvice">修改的reactive中的身份层次对象(reactive)</button>
    </div>



    表格数据: <button @click="query">查询</button>
    <div>
        {{ userArr }}

    </div>




</template>

<style scoped></style>
